<template>
  <div class="common-layout">
    <el-container id="main-container">
      <!-- <el-header v-show="showHeader"> -->
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <!-- <div class="stars">
          <div class="star"></div>
          <div class="star pink"></div>
          <div class="star blue"></div>
          <div class="star yellow"></div>
          <div class="star red"></div>
          <div class="star purple"></div>
          <div class="star green"></div>
          <div class="star pink1"></div>
          <div class="star p1"></div>
          <div class="star p2"></div>
          <div class="star p3"></div>
          <div class="star p4"></div>
          <div class="star p5"></div>
          <div class="star p6"></div>
          <div class="star p7"></div>
        </div> -->
        <RouterView></RouterView>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import Header from "@/components/Header/Header.vue";
import Footer from "@/components/Footer/Footer.vue";
import { tagCategory } from "@/store";
import { queryBlogCategoryList, queryBlogTagList } from "./api/blog";
import { onMounted } from "vue";
import { ElNotification } from "element-plus";
const tagCategoryStore = tagCategory();
// 获取标签列表
async function getCategory() {
  try {
    const { data } = await queryBlogCategoryList();
    tagCategoryStore.setCategoryList(data);
  } catch (error) {
    ElNotification.error({
      message: "获取标签列表失败",
      duration: 1000,
      title: "Failed",
    });
  }
}
// 获取分类列表
async function getTag() {
  try {
    const { data } = await queryBlogTagList();
    tagCategoryStore.setTagList(data);
  } catch (error) {
    ElNotification.error({
      message: "获取分类列表失败",
      duration: 1000,
      title: "Failed",
    });
  }
}
onMounted(() => {
  if (!tagCategoryStore.getTagList().length) {
    getTag();
  }
  if (!tagCategoryStore.getCategoryList().length) {
    getCategory();
  }
});
// import { onMounted, onUnmounted, ref } from "vue";
// const showHeader = ref<boolean>(true);

// onMounted(() => {
//   const dom = document.getElementById("main-container");
//   dom.addEventListener("wheel", (event: any) => {
//     if (event.deltaY > 0) {
//       showHeader.value = false;
//     } else {
//       showHeader.value = true;
//     }
//   });
// });
</script>
<style lang="scss" scoped>
$headerHeight: 60px;
$footerHeight: 60px;
.common-layout {
  height: 100%;
  overflow-x: hidden;
  .el-container {
    height: 100%;
  }
}
.el-header {
  width: 100%;
  padding: 0;
  margin: 0;
  height: $headerHeight;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}
.el-main {
  padding: 0;
  min-height: calc(100vh - $headerHeight - $footerHeight);
  overflow: hidden;
  margin-top: 60px;
}
.el-footer {
  height: $footerHeight;
}

// .stars {
//   height: 0px;
// }
// .star {
//   display: block;
//   width: 5px;
//   height: 5px;
//   border-radius: 50%;
//   background: #fff;
//   top: 100px;
//   left: 400px;
//   position: relative;
//   transform-origin: 100% 0;
//   animation: star-ani 6s infinite ease-out;
//   box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
//   opacity: 0;
//   z-index: 2;
// }

// .star:after {
//   content: "";
//   display: block;
//   top: 0px;
//   left: 4px;
//   border: 0px solid #fff;
//   border-width: 0px 90px 2px 90px;
//   border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
//   transform: rotate(-45deg) translate3d(1px, 3px, 0);
//   box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
//   transform-origin: 0% 100%;
//   animation: shooting-ani 3s infinite ease-out;
// }

// .pink {
//   top: 100px;
//   left: 395px;
//   // background: #ff5a99;
//   animation-delay: 5s;
//   -webkit-animation-delay: 5s;
//   -moz-animation-delay: 5s;
// }

// .pink:after {
//   border-color: transparent transparent transparent #ff5a99;
//   animation-delay: 5s;
//   -webkit-animation-delay: 5s;
//   -moz-animation-delay: 5s;
// }

// .blue {
//   top: 200px;
//   left: 432px;
//   background: cyan;
//   animation-delay: 7s;
//   -webkit-animation-delay: 7s;
//   -moz-animation-delay: 7s;
// }

// .blue:after {
//   /* border-color: transpareanimation-delay: 12s; */
//   -webkit-animation-delay: 7s;
//   -moz-animation-delay: 7s;
//   animation-delay: 7s;
// }

// .yellow {
//   top: 300px;
//   left: 600px;
//   background: #ffcd5c;
//   animation-delay: 5.8s;
// }

// .yellow:after {
//   border-color: transparent transparent transparent #ffcd5c;
//   animation-delay: 5.8s;
// }

// .red {
//   top: 400px;
//   left: 1000px;
//   background: red;
//   animation-delay: 9s;
// }

// .red:after {
//   border-color: transparent transparent transparent red;
//   animation-delay: 9s;
// }

// .purple {
//   top: 500px;
//   left: 1300px;
//   background: purple;
//   animation-delay: 5.8s;
// }

// .purple:after {
//   border-color: transparent transparent transparent purple;
//   animation-delay: 5.8s;
// }

// .green {
//   top: 600px;
//   left: 1600px;
//   background: green;
//   animation-delay: 7s;
// }

// .green:after {
//   border-color: transparent transparent transparent green;
//   animation-delay: 7s;
// }

// .pink1 {
//   top: 150px;
//   left: 1000px;
//   background: pink;
//   animation-delay: 5.8s;
// }

// .pink1:after {
//   border-color: transparent transparent transparent pink;
//   animation-delay: 5.8s;
// }

// //
// .p1 {
//   top: 1000px;
//   left: 200px;
//   // background: #ff5a99;
//   animation-delay: 4s;
//   -webkit-animation-delay: 4s;
//   -moz-animation-delay: 4s;
// }

// .p1:after {
//   border-color: transparent transparent transparent #ff5a99;
//   animation-delay: 4s;
//   -webkit-animation-delay: 4s;
//   -moz-animation-delay: 4s;
// }

// .p2 {
//   top: 1100px;
//   left: 300px;
//   background: cyan;
//   animation-delay: 7s;
//   -webkit-animation-delay: 7s;
//   -moz-animation-delay: 7s;
// }

// .p2:after {
//   /* border-color: transpareanimation-delay: 12s; */
//   -webkit-animation-delay: 7s;
//   -moz-animation-delay: 7s;
//   animation-delay: 7s;
// }

// .p3 {
//   top: 1200px;
//   left: 390px;
//   background: #ffcd5c;
//   animation-delay: 5.8s;
// }

// .p3:after {
//   border-color: transparent transparent transparent #ffcd5c;
//   animation-delay: 5.8s;
// }

// .p4 {
//   top: 800px;
//   left: 500px;
//   background: red;
//   animation-delay: 9s;
// }

// .p4:after {
//   border-color: transparent transparent transparent red;
//   animation-delay: 9s;
// }

// .p5 {
//   top: 1000px;
//   right: 100px;
//   background: purple;
//   animation-delay: 5.8s;
// }

// .p5:after {
//   border-color: transparent transparent transparent purple;
//   animation-delay: 5.8s;
// }

// .p6 {
//   top: 600px;
//   right: 300;
//   background: green;
//   animation-delay: 7s;
// }

// .p6:after {
//   border-color: transparent transparent transparent green;
//   animation-delay: 7s;
// }

// .p7 {
//   top: 150px;
//   right: 300px;
//   background: pink;
//   animation-delay: 5.8s;
// }

// .p7:after {
//   border-color: transparent transparent transparent pink;
//   animation-delay: 5.8s;
// }
// //
// @keyframes star-ani {
//   0% {
//     opacity: 0;
//     transform: scale(0) rotate(0) translate3d(0, 0, 0);
//     -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
//     -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
//   }

//   50% {
//     opacity: 1;
//     transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
//     -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
//     -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
//   }

//   100% {
//     opacity: 0;
//     transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
//     -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
//     -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
//   }
// }
</style>
